<template>
  <div id="todoitem">
    <input type="checkbox" v-model="completed" @click="toggleCompletion">
    <span :style="{ textDecoration: completed ? 'line-through' : 'none' }">{{ title }}</span>
    <button @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    title: String,  //待办事项的标题
    completed: Boolean  //待办事项的完成状态
  },
  methods: {
    // 切换待办事项的完成状态
    toggleCompletion() {
      this.$emit('update:completed', !this.completed);
    },
    // 发出删除待办事项的事件
    removeTodo() {
      this.$emit('remove-todo');
    }
  }
}
</script>

<style lang="less" scoped>
  #todoitem{
    input{
      margin-bottom: 10px;
    }
    span{
      margin: 15px 3px;
    }
  }
</style>